<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="操作日志" name="first">
        <div id="bigbox">
            <div id="topbox">
                <input id="inp" type="text" placeholder="请输入管理员">
                <el-button  :icon="Search" circle />
            </div>
            <div id="middlebox">
            <table>
                <tr>
                    <th id="th1">管理员</th>
                    <th id="th2">登录时间</th>
                    <th id="th3">操作</th>
                </tr>
                <template v-for="item in asd">
                    <tr>
                        <td id="td1">{{item.adminName}}</td>
                        <td id="td2">{{item.loginTime}}</td>
                        <td id="td3">{{item.operate}}</td>
                    </tr>
                </template>
                <div class="foot">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        :page-count="total"
                        @current-change="pageChange"/>
                </div>
            </table>
        </div>
        </div>
    </el-tab-pane>
    <el-tab-pane label="修改信息" name="second">
        <div id="bigbox1">
            <div id="topbox1">
                <div class="qwe123">修改信息</div>
                <div class="di123">
                    头像：
                </div>
                <div class="di123">
                    用户名：<input type="text" v-model="adminName">
                </div>
                <div class="di123">
                    账号：<input type="text" v-model="account">
                </div>
                <div class="di123">
                    密码：<input type="text" v-model="password">
                </div>
                <div class="di123">
                    手机号：<input id="shuju123" type="text" v-model="tel">
                </div>
                <div class="di123">
                    标识：<input type="text">
                </div>
                <div class="di123">
                    性别：<input type="radio" name="one1231" value="男">男
                    <input type="radio" name="one1231" value="女">女
                </div>
                <div class="di123">
                    <button id="baocun" @click="gaibian">保存</button>
                </div>
            </div>
        </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import {Search} from '@element-plus/icons-vue'
import { ElMessage, type TabsPaneContext } from 'element-plus'
const activeName = ref('first')
import axios from 'axios';
let pageSize = 7;
let currentPage = ref(1);
let total = ref(1);
let adminName = ref(localStorage.getItem("adminName"));
let account = ref(localStorage.getItem("account"));
let password = ref(localStorage.getItem("password"));
let tel = ref(localStorage.getItem("tel"));
const pageChange = (newPage) => {
    currentPage.value = newPage;
    xitong();
};

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
    //var axios=getCurrentInstance();
    var asd=ref([]);
    onMounted(()=>{
        xitong();
    })
    //系统页面渲染接口
    function xitong(){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/system/systemList`,
        {
            pageIndex:currentPage.value,
            pageSize:pageSize,
            adminId:localStorage.getItem("adminId"),
        })
        .then(function(res){
            var qwe=res.data.data.systems;
            total.value=res.data.data.pageCount;
            asd.value=qwe;
        })
    }
    //修改信息接口
    function gaibian(){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/admin/updateInformation`,
        {
            adminName:localStorage.getItem("adminName"),
            account:localStorage.getItem("account"),
            password:localStorage.getItem("password"),
            sex:localStorage.getItem("sex"),
            tel:tel.value,
            adminId:Number(localStorage.getItem("adminId")),
        })
        .then(function(res){
            console.log(res);
            ElMessage({
                type:"success",
                message:"修改成功"
            })
        })
    }
</script>

<style scoped>
    #baocun{
        width:20%;
        height:30px;
        background-color: #5981E1;
        color: #fff;
    }
    .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
    }
    .qwe123{
        width:100%;
        height:50px;
        text-align: center;
        line-height: 50px;
    }
    .di123{
        width:100%;
        height:10%;
        text-align: center;
        line-height: 20px;
    }
    #bigbox{
        width:100%;
        height:543px;
        background-color: #F5F5F5;
    }
    #bigbox1{
        width:100%;
        height:543px;
        background-color: #F5F5F5;
    }
    #topbox{
        width:90%;
        height:80px;
        margin-left:5%;
        line-height:80px;
    }
    #topbox1{
        width:30%;
        height:350px;
        background-color: #fff;
        position: fixed;
        left:38%;
        top:30%;
    }
    #inp{
        height:30px;
        width:15%;
        margin-right:1%;
        padding-left:1%;
        border-radius: 5px;
        border:0px;
        box-shadow: 1px 3px #ccc;
        outline: none;
    }
    .el-button.is-circle {
                     border-radius: 25%;
                    padding: 8px;
                    width: 32px;
                    position: relative;
    }
    .el-button{
                    background-color: #5981E2;
                    color: #fff;
                     font-size:20px;
    }
    #middlebox{
        width:90%;
        height:430px;
        margin-left:5%;
        background-color: #fff;
    }
    table{
        width:100%;
    }
    #th1{
        padding-top:2%;
        width:20%;
    }
    #th2{
        padding-top:2%;
        width:30%;
    }
    #th3{
        padding-top:2%;
        width:50%;
    }
    #td1{
        padding-top:2%;
        width:20%;
        text-align: center;
        font-size: 12px;
    }
    #td2{
        padding-top:2%;
        width:30%;
        text-align: center;
        font-size: 12px;
    }
    #td3{
        padding-top:2%;
        width:50%;
        text-align: center;
        font-size: 12px;
    }
    .foot{
    width: 90%;
    height: 10%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 41px;
    }
    .el-pagination{
        justify-content: center;
    }
    :deep(.el-tabs__nav-wrap::after) {
        position: static !important;
        }
        :deep( .el-tabs__header){
        background-color: #fff;
        margin: 0;
        }
       :deep(.el-tabs--left .el-tabs__active-bar.is-left){
            left: 10px;
        }
        :deep(.el-tabs__item.is-active, .el-tabs__item):hover{
            color:#000;
        }
</style>